<template>
	<view class="customServicePage">
		<view class="customContent">
			<view class="title">客服电话</view>
			<view class="contentList">
				<view class="phone" @click="callMe('400-666-2181')">400-666-2181</view>
			</view>
			<view class="title">电子邮箱</view>
			<view class="contentList">
				market@dcck.com.cn
			</view>
			<view class="title">7*24小时在线客服</view>
			<view class="qrcodeList">
				<u--image :src="picList[0]" shape="square" mode="aspectFill" width="282rpx" height="282rpx">
				</u--image>
			</view>
			<view class="title">联系技术专家</view>
			<view class="qrcodeList">
				<u--image :src="picList[1]" shape="square" mode="aspectFill" width="282rpx" height="282rpx">
				</u--image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				picList: []
			}
		},
		onLoad() {
			Promise.all([
				this.$request.get(this.$api.getBanner, {
					type: 5
				})
			]).then(res => {
				console.log(res, "pres")
				var picList = []
				res[0].result.forEach(item => {
					picList.push(this.$appFunc.getFileUrl(item.url))
				})
				console.log(picList, "123")
				this.picList = picList
				
				uni.hideLoading()
			})
		},
		methods: {
			callMe(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				})
			},
			savePhoto(url) {
				uni.saveImageToPhotosAlbum({
					filePath: url
				})
			}
		}
	}
</script>

<style lang="scss">
.customServicePage{
	.customContent{
		padding: 34rpx;
		.title{
			font-family: PingFang SC-Regular, PingFang SC;
			font-weight: 400;
			color: #333333;
			font-size: 26rpx;
			padding: 26rpx 0;
		}
		.contentList {
			display: flex;
			justify-content: flex-start;
			padding-left: 20rpx;
		}
		.qrcodeList{
			display: flex;
			justify-content: space-around;
		}
	}
	.contactUs {
		display: flex;
		justify-content: flex-start;
		flex-wrap: nowrap;
		width: calc(100vw - 80rpx);
		overflow-y: hidden;
		overflow-x: auto;
		padding: 10rpx 40rpx;
	
		.contactInfoContent {
			border-radius: 20rpx;
			padding: 26rpx 20rpx;
			margin-bottom: 20rpx;
			width: calc(100% - 40rpx);
			overflow: hidden;
			background-color: #fff;
			box-shadow: 0px 1rpx 0rpx 1rpx rgba(230, 230, 230, .5);
			display: flex;
			flex-wrap: nowrap;
	
			.contactInfo {
				height: 104rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				width: 55%;
			}
	
			.phoneContent,
			.emailContent {
				display: flex;
				justify-content: flex-start;
				flex-wrap: nowrap;
				flex-shrink: 0;
				font-size: 26rpx;
				color: #666666FF;
				align-items: center;
			}
	
			.phone,
			.email {
				padding-left: 8rpx;
				position: relative;
				top: -4rpx;
			}
		}
	
		.qrCodeContent {
			display: flex;
			justify-content: space-around;
			flex-wrap: nowrap;
			width: 45%;
		}
	}
}
</style>
